<template>
  <div class="all">
    <ul class="Nall-right">
          <li> <el-button type="primary" plain size="mini" @click="addshow()">手动加值</el-button></li>
          <li class="Nall-right">
            <el-date-picker
              v-model="time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd 00:00:00"
              size="mini">
            </el-date-picker>
            <span>  <el-input v-model="condition.userId" placeholder="请输入用户名" size="mini" clearable></el-input></span>
            <span>充值方式:
           <el-select v-model="condition.chargeMode" placeholder="请选择" size="mini">
            <el-option
                v-for="item in chargeMode"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
          </el-select></span>
            <span>状态:           <el-select v-model="condition.status" placeholder="请选择" size="mini">
            <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
          </el-select></span>
            <span>
    <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">搜索</el-button>
</span>
          </li>
        </ul>
        <div style="margin-top: 15px;" class="tableX">
          <el-table
                :data="list"
                style="width: 100%"
                 height="680"
                 highlight-current-row
                 :header-cell-style="{background:'#eef3f7'}" align='center'
                 :cell-style="{padding:'6px 0'}">
                <el-table-column
                  prop="id"
                  label="ID"width="50"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="userId"
                  label="用户账号"align="center">
                </el-table-column>
                <el-table-column
                  prop="orderNo"
                  label="交易订单号" align="center">
                </el-table-column>
                <el-table-column
                  prop="chargeMode"
                  label="充值方式" width="80">
                </el-table-column>
                <el-table-column
                  prop="thirdOrderNo"
                  label="第三方支付账单号" width="190">
                </el-table-column>
                <el-table-column

                  label="支付金额" align='center' width="80">
                  <template slot-scope="scope">
                      {{'￥'+scope.row.rmb }}
                    </template>
                </el-table-column>
                <el-table-column
                  prop="coin"
                  label="获得金币" align='center' width="80">
                </el-table-column>
                <el-table-column
                  prop="content"
                  label="说明" align='center'>
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态" align="center">
                </el-table-column>
                <el-table-column
                  prop="chargeTime"
                  label="付款时间" align="center">
                </el-table-column>
              </el-table>

          <div class="Page" v-show="condition.quantity >condition.pageSize">
                <el-pagination
                background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="condition.pageIndex"
                  :page-sizes="[20, 30, 40, 50]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="condition.quantity">
                </el-pagination>

          </div>
        </div>

        <div class="manual" v-show="show">
          <h3>手动加值<i class="el-icon-circle-close" @click="cancel()"></i></h3>
          <ul> <li class="manual-1">
          用户名
          </li>
          <li class="manual-2"><input type="text" v-model="date.name"><i class="el-icon-warning"></i><span>请输入用户名</span></li>
          </ul>
          <ul>
            <li class="manual-1">
          加/减值额
          </li>
           <li class="manual-2">
            <select name="" id="" v-model="date.select">
              <option value="0">+</option>
              <option value="1">-</option>
            </select>
            <input type="text" v-model="date.quantity"><i class="el-icon-warning"></i><span>请输入加值额</span>
           </li>
          </ul>
         <el-button type="primary" round @click="subim()">提交</el-button>
        </div>
  </div>
</template>

<script>
  export default {
     inject:["reload"],
      data() {
        return {
          time1:'',
          condition:{
            pageIndex:1,
            pageSize:20,
            quantity:0
          },
          status:[
            {
              value:'交易成功',
              label:'交易成功'
            },
            {
              value:'等待交易',
              label:'等待交易'
            },
            {
              value:'交易失败',
              label:'交易失败'
            },
            {
              value:'交易关闭',
              label:'交易关闭'
            },
            {
              value:'创建交易',
              label:'创建交易'
            },
          ],

          chargeMode:[
            {
              value:'支付宝',
              label:'支付宝'
            },
            {
              value:'微信',
              label:'微信'
            },
          ],
          list:[],
           date:{
             select:0,
             name:'',
             quantity:''
           },
           show:false

        }
        },
        methods:{
          search(){
            this.condition.startTime=this.time1[0]
             this.condition.endTime=this.time1[1]
                if(this.condition.userId){}else{
                  delete this.condition.userId
                }
             this.PostData('admin/charge/detail/get',this.condition)
          },
          //翻页
          handleSizeChange(val) {
            this.condition.pageSize=val
             this.PostData('admin/charge/detail/get',this.condition)
              },
           handleCurrentChange(val) {
             this.condition.pageIndex=val
              this.PostData('admin/charge/detail/get',this.condition)
          },

          //请求
          PostData(url,e){
            var _this=this
            this.$axios({
              method: "POST",
              url: '/api/'+url,
              headers: {'Content-Type': 'application/json'},
              data: {
                        adminName:_this.$cookies.get('adminName'),
                        token:_this.$cookies.get('token'),
                        userId:e.userId,
                        chargeMode:e.chargeMode,
                        startTime:e.startTime,
                        endTime:e.endTime,
                        status:e.status,
                        pageIndex:e.pageIndex,
                        pageSize:e.pageSize
                    },
            }).then(res=>{
              console.log(res)
              if(res.data.data!=null){
                 var data=res.data.data
                 _this.condition.quantity=data.sum
                 _this.list=data.chargeDetails
              }
            })
          },
          cancel(){
            this.show=false
           Object.assign(this.$data.date, this.$options.data().date)
           console.log(this.date)
          },
          addshow(){
            this.show=true
          },
          //add
          subim(){

			  let e=[]
			  if(this.date.select==1){
				e.coin=Number(-this.date.quantity)
			  }else{
				  e.coin=Number(this.date.quantity)
			  }
			  e.userName=this.date.name

			  var _this=this
			  this.$axios({
				  method: "POST",
				  url: '/api/admin/user/coin/add',
				  headers: {'Content-Type': 'application/json'},
				  data: {
				            adminName:_this.$cookies.get('adminName'),
				            token:_this.$cookies.get('token'),
                    userName:e.userName,
                    coin:e.coin
				        },
			  }).then(res=>{
          console.log(res)
            if(res.data.code==0){
              _this.$alert('操作成功', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                    _this.reload()
                 }
               });
            }else{
              _this.$alert('操作失败', '提示', {
                 confirmButtonText: '确定',
                 callback: action => {
                    _this.reload()
                 }
               });
            }
			  })

          },
        },
        mounted(){
          this.PostData('admin/charge/detail/get',this.condition)
        }
        }
</script>

<style scoped>
  .Nall-right{
      margin-left: 10px;
      display: inline-flex;
    }
    .add ul{
          display: inline-flex;
    }
    li{
      height: 1.875rem;
      line-height: 1.875rem;
    }
    .manual{
      width: 600px;
      height: 380px;
      border: 1px solid #eee;
      position: fixed;
      top: 37%;
      left: 39%;
      background-color: #fff;
    }
    .manual ul{
      border-bottom:1px solid #eee;
      height: 60px;
      width: 100%;
      margin: auto;
      display: inline-flex;
    }
    .manual li{
      margin-top: 15px;
    }
.manual-1{
  width: 150px;
  text-align: right;
}
.manual-2{
  margin-left: 10px;
}
  span{
    margin-left: 5px;
  }

  .el-icon-warning{
    color: #40B3FF;
  }
  span{
      color: rgb(149, 149, 149);
      font-size: 12px;
  }

  .manual button{
        margin: 20px auto;
        display: block;
        width: 120px;
        font-size: 18px;
  }
  .el-input{
        width: 130px;
  }

</style>
